<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <!-- 引入 xlsx 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <title>工资查询系统</title>
</head>

<body class="bg-gray-100 font-sans">
    <div class="container mx-auto p-8">
        <h1 class="text-3xl font-bold text-center mb-8">工资查询系统</h1>
        <input type="file" id="excelFileInput" accept=".xlsx" class="block mb-4">
        <select id="nameSelect" class="block w-full p-3 border border-gray-300 rounded mb-4 focus:outline-none focus:border-blue-500 hidden">
            <option value="">请选择姓名</option>
        </select>
        <button id="searchButton"
            class="bg-blue-500 text-white p-3 rounded hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
            <i class="fa-solid fa-magnifying-glass"></i> 查询
        </button>
        <table id="salaryTable"
            class="min-w-full divide-y divide-gray-200 mt-8 border-collapse border border-gray-300 hidden">
            <thead id="salaryTableHeader" class="bg-gray-50">
                <!-- 表头将动态生成 -->
            </thead>
            <tbody id="salaryTableBody" class="bg-white divide-y divide-gray-200">
                <!-- 示例数据 -->
            </tbody>
        </table>
    </div>
    <script>
        const searchButton = document.getElementById('searchButton');
        const nameSelect = document.getElementById('nameSelect');
        const salaryTableBody = document.getElementById('salaryTableBody');
        const excelFileInput = document.getElementById('excelFileInput');
        const salaryTable = document.getElementById('salaryTable');
        const salaryTableHeader = document.getElementById('salaryTableHeader');

        excelFileInput.addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (event) {
                    const data = new Uint8Array(event.target.result);
                    const workbook = XLSX.read(data, { type: 'array' });
                    const firstSheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[firstSheetName];
                    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' });

                    // 清空表格和下拉框
                    salaryTableHeader.innerHTML = '';
                    salaryTableBody.innerHTML = '';
                    nameSelect.innerHTML = '<option value="">请选择姓名</option>';

                    // 动态创建表头
                    const headerRow = document.createElement('tr');
                    jsonData[0].forEach((header) => {
                        const th = document.createElement('th');
                        th.textContent = header;
                        th.classList.add('px-6', 'py-3', 'text-left', 'text-xs', 'font-medium', 'text-gray-500', 'uppercase', 'tracking-wider');
                        headerRow.appendChild(th);
                    });
                    salaryTableHeader.appendChild(headerRow);

                    // 填充表格内容
                    for (let i = 1; i < jsonData.length; i++) {
                        const row = document.createElement('tr');
                        row.style.display = 'none';
                        jsonData[i].forEach((cell) => {
                            const td = document.createElement('td');
                            let content;
                            if (typeof cell === 'object' && cell!== null && 'w' in cell) {
                                content = cell.w;
                            } else if (cell === false || cell === '' || cell === null || cell === undefined) {
                                content = '';
                            } else if (cell === 0) {
                                // 对值为 0 的单元格做特殊处理
                                content = '';
                            } else if (typeof cell === 'number') {
                                content = cell.toFixed(2);
                            } else {
                                content = cell;
                            }
                            const text = String(content?? '');
                            td.textContent = text === ''? '\u00A0' : text;
                            td.classList.add('px-6', 'py-4', 'whitespace-nowrap');
                            row.appendChild(td);
                        });
                        salaryTableBody.appendChild(row);

                        const option = document.createElement('option');
                        // 将第一列作为下拉选项
                        option.value = jsonData[i][0];
                        option.textContent = jsonData[i][0];
                        nameSelect.appendChild(option);
                    }
                    salaryTable.classList.add('hidden');
                    nameSelect.classList.remove('hidden');
                };
                reader.readAsArrayBuffer(file);
            }
        });

        searchButton.addEventListener('click', function () {
            const selectedName = nameSelect.value;
            const rows = salaryTableBody.getElementsByTagName('tr');
            for (let i = 0; i < rows.length; i++) {
                const cell = rows[i].getElementsByTagName('td')[0];
                if (cell) {
                    const textValue = cell.textContent || cell.innerText;
                    if (textValue === selectedName) {
                        rows[i].style.display = '';
                    } else {
                        rows[i].style.display = 'none';
                    }
                }
            }
            nameSelect.value = '';
            salaryTable.classList.remove('hidden');
        });
    </script>
</body>

</html>
    